<template>
  <div class="nav">
    <button 
      v-for="(item) in navList" 
      :key="item.id" 
      @click="init(item.type)"
      style="backgroundColor: #fdf2e6; color: #f08936"
    > {{item.name}} </button>
  </div>
</template>
<script>
import MarkerInstance from "@/components/marker/index";
import PolygonInstance from "@/components/polygon/index";
import ClusterInstance from "@/components/clusterLayer/index";
import VectorInstance from "@/components/vector/index";
import LineShadowInstance from '@/components/lineShadowLayer/index'
export default {
  data() {
    return {
      navList: [
        {
          id: "01",
          name: "polygon",
          type: "polygon",
        },
        {
          id: "02",
          name: "marker",
          type: "marker",
        },
        {
          id: "03",
          name: "cluster",
          type: "cluster",
        },
        {
          id: "04",
          name: "vector",
          type: "vector",
        },
        {
          id: "05",
          name: "line-shadow",
          type: "line",
        },
      ],
      markerInstance: null,
      polygonInstance: null,
      clusterInstance: null,
      vectorInstance: null,
      lineShadowInstance: null,
    }
  },
  methods: {
    init(type) {
      
      switch (type) {
        case "polygon":
          if (this.polygonInstance) return;
          let polygonOptions = {
            map: this.getSelf().map,
          };
          this.polygonInstance = new PolygonInstance(polygonOptions);
          this.polygonInstance.show();
          break;
      
        case "marker":
          if (this.markerInstance) return;
          let markerOptions = {
            map: this.getSelf().map,
          }
          this.markerInstance = new MarkerInstance(markerOptions);
          this.markerInstance.show();
          break;

        case "cluster":
          if (this.clusterInstance) return;
          let clusterOptions = {
            map: this.getSelf().map,
          };
          this.clusterInstance = new ClusterInstance(clusterOptions);
          this.clusterInstance.on("domMounted", (res) => {
            console.log(res, "dom挂载完成");
          });
          this.clusterInstance.show();
          break;

        case "vector":
          if (this.vectorInstance) return;
          let vectorOptions = {
            map: this.getSelf().map,
          };
          this.vectorInstance = new VectorInstance(vectorOptions);
          this.vectorInstance.show();
          break;
        
        case "line":
          if (this.lineShadowInstance) return 
          let lineShadowOptions = {
            map: this.getSelf().map
          }
          this.lineShadowInstance = new LineShadowInstance(lineShadowOptions)    
          this.lineShadowInstance.show()
          break;

        default:
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .nav {
    position: absolute;
    top: 20px;
    left: 20px;
  }
</style>
